<%@ page import="com.lagou.task.service.StudentService" %>
<%@ page import="com.lagou.task.entity.Student" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: liuyunkai
  Date: 2021/1/9
  Time: 6:55 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生信息显示</title>
    <%--导入bootstrap样式--%>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body style="padding: 100px">
    <div class="container-fluid">
        <!--定义一个内联的div块-->
        <div class="form-inline">
            <!--定义按钮-->
            <div class="form-inline">
                <button type="button" class="btn btn-info" id="btn-add">新增</button>
                <button type="button" class="btn btn-info" id="btn-delete">删除</button>
                <button type="button" class="btn btn-info" id="btn-modify">编辑</button>
            </div>
            <div class="form-inline" style="position:relative; left: 190px; bottom: 33px">
                <form class="form-horizontal" action="find">
                    <div class="form-group">
                        <button type="submit" class="btn btn-info" id="btn-select">查询</button>
                    </div>
                    <!--定义搜索框-->
                    <div class="form-group" style="position: relative; left: 40px">
                        <input type="text" class="form-control" placeholder="按工号查询" id="selectById" name="selectById">
                    </div>
                </form>
            </div>
        </div>
        <%--添加错误提示--%>
        <% String addError = (String) request.getAttribute("addError");
           if (addError != null){ %>
        <div class="alert alert-danger" id="addError">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>添加学生有误！学号重复！</strong>
        </div>
        <%}%>

        <%--修改成功提示--%>
        <% String modifySuccess = (String) request.getAttribute("modifySuccess");
            if (modifySuccess != null){ %>
        <div class="alert alert-success" id="modifySuccess">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>修改学生信息成功！</strong>
        </div>
        <%}%>
        <!--定义表格-->
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th></th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>出生日期</th>
                    <th>email</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody id="userTbody">
                    <!-- 显示学生信息 -->
                    <% response.setCharacterEncoding("utf-8");
                        StudentService studentService = new StudentService();
                        List<Student> students = studentService.showAllService();
                        if (students.size() > 0){
                            for (int i=0;i<students.size();i++){ %>
                    <tr class="default-color0">
                        <td><input type="checkbox"></td>
                        <td><%=students.get(i).getId()%></td>
                        <td><%=students.get(i).getName()%></td>
                        <td><%=students.get(i).getSex()%></td>
                        <td><%=students.get(i).getBirth()%></td>
                        <td><%=students.get(i).getEmail()%></td>
                        <td><%=students.get(i).getNote()%></td>
                    </tr>
                    <%
                           }
                       }
                    %>
                </tbody>
            </table>
        </div>
    </div>

    <!--增加用户模态框-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">添加信息</h4>
                </div>
                <div class="modal-body">
                    <!--定义表单-->
                    <form class="form-horizontal" role="form" id="addForm" action="add" method="post">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入8位学号" name="id">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入姓名" name="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="sex">
                                    <option>男</option>
                                    <option>女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">出生日期</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="格式：2020-01-01" name="birth">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入邮箱" name="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入备注" name="note">
                            </div>
                        </div>
                        <!--定义按钮-->
                        <div class="modal-footer form-group">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="add">新增</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除用户模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">确定删除如下学生信息吗？</h4>
                    <!--定义按钮-->
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" id="deleteForm" action="delete" method="post">
                            <div class="form-group">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th>学号</th>
                                        <th>姓名</th>
                                        <th>性别</th>
                                        <th>出生日期</th>
                                        <th>email</th>
                                        <th>备注</th>
                                    </tr>
                                    </thead>
                                    <tbody id="deleteUserTbody">
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer form-group">
                                <%--设置一个隐藏的input存储要删除学生的id--%>
                                <input type="hidden" name="deleteID" id="deleteID">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary" id="delete">删除</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑用户模态框 -->
    <div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">编辑信息</h4>
                </div>
                <div class="modal-body">
                    <!--定义表单-->
                    <form class="form-horizontal" role="form" id="modifyForm" action="modify" method="post">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入8位学号" name="modifyId">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入姓名" name="modifyName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入性别" name="modifySex">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">出生日期</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入出生日期" name="modifyBirth">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">email</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入email" name="modifyEmail">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请填写备注" name="modifyNote">
                            </div>
                        </div>
                        <!--定义按钮-->
                        <div class="modal-footer form-group">
                            <%--设置一个隐藏的input存储要修改学生的id--%>
                            <input type="hidden" name="modifyHiddenID" id="modifyID">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="modify">修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <%--导入js插件--%>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        /* 设置错误提示提示存活时间 */
        $("#addError").delay(2000).fadeOut();
        $("#modifySuccess").delay(2000).fadeOut();

        /* 添加学生 */
        $("#btn-add").click(function () {
            $("#addModal").modal("toggle");
            // 设置提交按钮
            $("#add").attr("disabled","disabled");

            // 学生学号验证
            var regId = /^[0-9]{8}$/;
            $("[name='id']").focus(function() {
                    var id_focus = $("[name='id']").val();
                    if (!regId.test(id_focus)){
                        $("[name='id']").parent().addClass("has-error");
                    }
                });
            $("[name='id']").blur(function () {
                var id_blur = $("[name='id']").val();
                if (regId.test(id_blur)){
                    $("[name='id']").parent().removeClass("has-error");
                    $("[name='id']").parent().addClass("has-success");
                }
            });

            // 学生姓名验证
            var regName = /^[\u4e00-\u9fa5]{1,10}$/;
            $("[name='name']").focus(function() {
                var name_focus = $("[name='name']").val();
                if (!regName.test(name_focus)){
                    $("[name='name']").parent().addClass("has-error");
                }
            });
            $("[name='name']").blur(function () {
                var name_blur = $("[name='name']").val();
                if (regName.test(name_blur)){
                    $("[name='name']").parent().removeClass("has-error");
                    $("[name='name']").parent().addClass("has-success");
                }
            });

            // 出生日期验证
            var regBirth = /^\d{4}-\d{1,2}-\d{1,2}/;
            $("[name='birth']").focus(function() {
                var birth_focus = $("[name='birth']").val();
                if (!regBirth.test(birth_focus)){
                    $("[name='birth']").parent().addClass("has-error");
                }
            });
            $("[name='birth']").blur(function () {
                var birth_blur = $("[name='birth']").val();
                if (regBirth.test(birth_blur)){
                    $("[name='birth']").parent().removeClass("has-error");
                    $("[name='birth']").parent().addClass("has-success");
                }
            });

            // email验证
            var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            $("[name='email']").focus(function() {
                var email_focus = $("[name='email']").val();
                if (!regEmail.test(email_focus)){
                    $("[name='email']").parent().addClass("has-error");
                }
            });
            $("[name='email']").blur(function () {
                var email_blur = $("[name='email']").val();
                if (regEmail.test(email_blur)){
                    $("[name='email']").parent().removeClass("has-error");
                    $("[name='email']").parent().addClass("has-success");

                    // 激活提交按钮
                    if (!$("#addForm").find("input").hasClass("has-error")){
                        $("#add").removeAttr("disabled");
                    }
                }
            });
            // 清空模态框
            $("#addForm")[0].reset();
        });

        /* 删除学生 */
        $("#btn-delete").click(function () {
            /* 获得选中节点的个数 */
            var count = $("input[type='checkbox']:checked").length;
            // 先清空数据
            $("#deleteUserTbody").empty();
            var text = "";
            var temId = "";
            /* 若有选中，则进入模态框 */
            if (count > 0){
                $("#deleteModal").modal("toggle");
                /* 遍历找到选中的复选框 */
                $("input[type='checkbox']:checked").each(function () {
                    /* 找到对应复选框的行并删除该节点 */
                    text += "<tr class='default-color0'>" + $(this).parent().parent().html() + "</tr>";
                    // 获得学号并设置name
                    temId += $(this).parent().next().text() + " ";

                });
                // 将要删除学生的id放到input的value中
                $("#deleteID").attr("value",temId);
                //var deleteId = $("#deleteID").val();

                $("#deleteUserTbody").append(text);
                $("#delete").click(function () {
                    /* 隐藏模态框 */
                    $("#deleteModal").modal("hide");
                });
            }else {
                alert("请选择要删除的学生信息！");
            }
        });

        /* 修改学生 */
        $("#btn-modify").click(function () {
            /* 获得选中节点的个数 */
            var count = $("input[type='checkbox']:checked").length;
            var temId = ""
            /* 若有选中，则进入模态框 */
            if (count == 1){
                $("#modifyModal").modal("toggle");
                /* 遍历找到选中的复选框 */
                $("input[type='checkbox']:checked").each(function () {
                    // 获得学号并设置name
                    temId = $(this).parent().next().text();
                    var modifyName = $(this).parent().next().next().text();
                    var modifySex = $(this).parent().next().next().next().text();
                    var modifyBirth = $(this).parent().next().next().next().next().text();
                    var modifyEmail = $(this).parent().next().next().next().next().next().text();
                    var modifyNote = $(this).parent().next().next().next().next().next().next().text();

                    // 将选择学生信息显示
                    $("[name='modifyId']").attr("value",temId);
                    $("[name='modifyName']").attr("value",modifyName);
                    $("[name='modifySex']").attr("value",modifySex);
                    $("[name='modifyBirth']").attr("value",modifyBirth);
                    $("[name='modifyEmail']").attr("value",modifyEmail);
                    $("[name='modifyNote']").attr("value",modifyNote);
                });
                // 将要编辑学生的id放到input的value中
                $("#modifyID").attr("value",temId);

            }else if (count > 1){
                alert("每次只能编辑一条信息！");
            }else{
                alert("请选择要编辑的学生信息！");
            }
        });
    </script>
</body>
</html>